<template>
	<div>
		<Input v-model="value" placeholder="请输入..." style="width: 300px"></Input> 
		<Button type="primary" :loading="loading" @click="search">搜索</Button>
		<Button type="primary" icon="person-add">新增</Button>
	    <Table border  :loading="loading" :columns="columns" :data="list"></Table>
	    <div class="">
	    	<Page :total="page.totalElements" :page-size="page.pageSize" show-total @on-change="changepage"></Page>
	    </div>
	    <EmployeeDes></EmployeeDes>
    </div>
</template>
<script>
	import EmployeeDes from './employeeDes.vue';
    export default {
        data () {
            return {
            	loading: true,
            	value:"",
            	page:{
            		pageNo:0,
            		totalElements:0,
            		pageSize:2
            	},
                columns: [
               	 	{
                        title: '工号',
                        key: 'employee_num'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        render: (h, params) => {
                        	let _sex;
                        	params.row.sex=="male"?_sex="男":_sex="女"
                        	return h('span',_sex)
                        }
                    },
                    {
                        title: '联系电话',
                        key: 'phone'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
	                        let _status;
	                    	params.row.status=="working"?_status="在职":params.row.status=="leaving"?_status="离职":_status="试用"
	                    	return h('span',_status)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                list: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ]
            }
        },
        components:{
        	EmployeeDes
        },
        methods: {
        	showData(){
        		this.loading=true;
        		var _data={
					 "fields": {
						"value": this.value
					},
					"page_no": this.page.pageNo,
					"page_size": this.page.pageSize,
					"sort_fields": "created_date",
					"sort_type": "DESC"
				}
				$.ajax({
					url: "http://101.132.155.197:1000/employee/findPage",
					type: "POST",
					dataType: "json", 
					contentType: "application/json",
					async:true,
					data: JSON.stringify(_data)
				}).then((d) => {
					this.loading=false;
					this.page.totalPages=d.totalElements;
					this.list=d.content;
				})
        	},
        	search(){
        		this.showData();
        	},
        	changepage(page){
        		this.page.pageNo=page-1;
        		this.showData();
        	},
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            }
        },
        mounted() {
        	var _data={
					 "fields": {
						"value": ""
					},
					"page_no": this.page.pageNo,
					"page_size": this.page.pageSize,
					"sort_fields": "created_date",
					"sort_type": "DESC"
				}
			$.ajax({
				url: "http://101.132.155.197:1000/employee/findPage",
				type: "POST",
				dataType: "json", 
				contentType: "application/json",
				async:true,
				data: JSON.stringify(_data)
			}).then((d) => {
				this.loading=false;
				this.page.totalElements=d.totalElements;
				this.list=d.content;
				console.log(this.list)
			})
		}
    }
</script>
